<template>
<div>
    <div class="imgbox">
        <img src="../../assets/img/团队logo.jpg" width="135px" height="135px"/>
    </div>
    <el-menu :default-active="activeIndex" class="el-menu-demo nva_style" mode="horizontal" @select="handleSelect">
        <el-row>
            <el-col :span="7">
                <div class="grid-content"></div>
            </el-col>
            <!--                <el-col :span="12">-->
            <!--                    <h1 class="">半点时光甜品店</h1>-->
            <!--                </el-col>-->
            <el-col :span="2">
                <el-menu-item index="4" @click="uindex()">首页</el-menu-item>
            </el-col>
            <el-col :span="2">
                <el-menu-item index="4" @click="cakes()">稻瘟病</el-menu-item>
            </el-col>
            <el-col :span="2">
                <el-menu-item index="4" @click="desserts()">白叶枯病</el-menu-item>
            </el-col>
            <el-col :span="2">
                <el-menu-item index="4" @click="puddings()">水稻曲病</el-menu-item>
            </el-col>
              <el-col :span="2">
                <el-menu-item index="4" @click="pictures()" align="center">识别</el-menu-item>
              </el-col>
            <el-col :span="2">
                <el-submenu index="2">
                    <template slot="title">用户中心</template>
<!--                    <el-menu-item index="2-1" @click="shoppingCart()">购物车</el-menu-item>-->
                    <el-menu-item index="2-2" @click="edit()">信息修改</el-menu-item>
                    <el-menu-item index="2-3" @click="loginOut()">退出登录</el-menu-item>
                </el-submenu>
            </el-col>
            <el-col :span="3">
            </el-col>
        </el-row>
    </el-menu>

    <el-row class="er1">
        <el-col :span="3">
            <div class="grid-content"></div>
        </el-col>

        <el-col :span="18">
            <el-row class="er1">
                <el-col :span="8">

                    <div  class="demo-fit">
                        <div class="block" >
                            <el-avatar shape="square" :size="300" :fit="fit" :src="tableData.bookPoster"></el-avatar>
                        </div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <h3 >常见病：白叶枯病{{tableData.bookName}}</h3>
                    <h4 class="introduce">病原特征：{{tableData.author}}</h4>
                    <p>白叶枯病菌主要在稻种、稻草和稻桩上越冬，据江苏研究，重病田稻桩附近土壤中的细菌也可越年传病。播种病谷，病菌可通过幼苗
                        的根和芽鞘侵入。病稻草和稻桩上的病菌，遇到雨水就渗入水流中，秧苗接触带菌水，病菌从水孔、伤口侵入稻体。用病稻草催芽，
                        覆盖秧苗、扎秧把等有利病害传播。早、中稻秧田期由于温度低，菌量较少，一般看不到症状，直到孕穗前后才暴发出来。</p>
                    <h4 class="introduce">病原特征：{{tableData.bookProfile}}</h4>
<!--                    <p class="introduce"><span>价格:</span>{{tableData.bookClassid}}<span> RMB</span></p>-->
<!--                    <p class="introduce"><span>甜品介绍:</span>{{tableData.bookProfile}}</p>-->
<!--                    <p class="introduce"><el-button @click="shoppingCart()">加入购物车</el-button></p>-->
                </el-col>
                <el-col :span="8">
                    <div style="margin-left: 20px;">
                        <h4 class="introduce">评论人数：{{number1}}</h4>
                        <h4><span>浏览人数：</span>{{number2}}</h4>
                        <p class="introduce"></p>

                    </div>
                </el-col>
            </el-row>

        </el-col>
        <el-col :span="3">
        </el-col>
    </el-row>
    <el-row class="er1">
        <el-col :span="3">
            <div class="grid-content"></div>
        </el-col>
        <el-col :span="18">
            <div>
                <div v-clickoutside="hideReplyBtn" @click="inputFocus" class="my-reply">
                    <el-avatar class="header-img" :size="40" :src="myHeader"></el-avatar>
                    <div class="reply-info" >
                        <div
                                tabindex="0"
                                contenteditable="true"
                                id="replyInput"
                                spellcheck="false"
                                placeholder="输入评论..."
                                class="reply-input"
                                @focus="showReplyBtn"
                                @input="onDivInput($event)"
                        >
                        </div>
                    </div>
                    <div class="reply-btn-box" v-show="btnShow">
                        <el-button class="reply-btn" size="medium" @click="sendComment" type="primary">发表评论</el-button>
                    </div>
                </div>
                <div v-for="(item,i) in comments" :key="i" class="author-title reply-father">
                    <el-avatar class="header-img" :size="40" :src="item.headImg"></el-avatar>
                    <div class="author-info">
                        <span class="author-name">{{item.name}}</span>
                        <span class="author-time">{{item.time}}</span>
                    </div>
                    <div class="icon-btn">
                        <span @click="showReplyInput(i,item.name,item.id)"><i class="iconfont el-icon-s-comment"></i>{{item.commentNum}}</span>
                        <i class="iconfont el-icon-caret-top"></i>{{item.like}}
                    </div>
                    <div class="talk-box">
                        <p>
                            <span class="reply">{{item.comment}}</span>
                        </p>
                    </div>
                    <div class="reply-box">
                        <div v-for="(reply,j) in item.reply" :key="j" class="author-title">
                            <el-avatar class="header-img" :size="40" :src="reply.fromHeadImg"></el-avatar>
                            <div class="author-info">
                                <span class="author-name">{{reply.from}}</span>
                                <span class="author-time">{{reply.time}}</span>
                            </div>
                            <div class="icon-btn">
                                <span @click="showReplyInput(i,reply.from,reply.id)"><i class="iconfont el-icon-s-comment"></i>{{reply.commentNum}}</span>
                                <i class="iconfont el-icon-caret-top"></i>{{reply.like}}
                            </div>
                            <div class="talk-box">
                                <p>
                                    <span>回复 {{reply.to}}:</span>
                                    <span class="reply">{{reply.comment}}</span>
                                </p>
                            </div>
                            <div class="reply-box">

                            </div>
                        </div>
                    </div>
                    <div  v-show="_inputShow(i)" class="my-reply my-comment-reply">
                        <el-avatar class="header-img" :size="40" :src="myHeader"></el-avatar>
                        <div class="reply-info" >
                            <div tabindex="0" contenteditable="true" spellcheck="false" placeholder="输入评论..."   @input="onDivInput($event)"  class="reply-input reply-comment-input"></div>
                        </div>
                        <div class=" reply-btn-box">
                            <el-button class="reply-btn" size="medium" @click="sendCommentReply(i,j)" type="primary">发表评论</el-button>
                        </div>
                    </div>
                </div>
            </div>
        </el-col>
        <el-col :span="3">
        </el-col>
    </el-row>
</div>
</template>

<script>
    import axios from 'axios'
    const clickoutside = {
        // 初始化指令
        bind(el, binding, vnode) {
            function documentHandler(e) {
                // 这里判断点击的元素是否是本身，是本身，则返回
                if (el.contains(e.target)) {
                    return false;
                }
                // 判断指令中是否绑定了函数
                if (binding.expression) {
                    // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
                    binding.value(e);
                }
            }
            // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
            el.vueClickOutside = documentHandler;
            document.addEventListener('click', documentHandler);
        },
        update() {},
        unbind(el, binding) {
            // 解除事件监听
            document.removeEventListener('click', el.vueClickOutside);
            delete el.vueClickOutside;
        },
    };
    export default {
        name: "UserMovie",

        data() {
            return {
                tableData:[],
                bookname: "龙猫",
                actor:"宫崎骏",
                m_class:"动画",
                number1:"123",
                number2:"321",
                introduce:"是由宫崎骏执导，日高法子、坂本千夏、糸井重里配音的动画电影，于1988年4月16日在日本上映。高清重制版于2018年12月14日在中国公映。该片讲述了草壁达郎的妻子草壁靖子生病住院后，他带着草壁皋月与四岁的妹妹草壁米回到乡间居住的故事",
                url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                btnShow: false,
                index:'0',
                replyComment:'',
                myName:'爱吃甜品的猫',
                myHeader:'https://wx2.sinaimg.cn/mw690/0088yEhgly1ghdds49nuej306o06ogme.jpg',
                myId:19870621,
                to:'',
                toId:-1,
                comments:[
                    {
                        name:'许永青',
                        id:19870621,
                        headImg:'https://wx2.sinaimg.cn/mw690/0088yEhgly1ghdds4a0ioj30a806o410.jpg',
                        comment:'救救孩子！',
                        time:'2019年9月16日 18:43',
                        commentNum:2,
                        like:15,
                        inputShow:false,
                    },
                ]
            }
        },
        mdirectives: {clickoutside},
        created() {
            var mid = this.$route.query.mid
            this.getData(mid)
        },
        methods: {
            getData(mid) {
                const _this=this
                axios.get("http://localhost:8083/desserts/getDessertOne/"+mid)
                    .then(response => {
                        if(response.data){
                            console.log(response.data);
                            this.tableData = [];
                            this.tableData = response.data;
                        }
                    })
                    .catch(error => {
                        console.log(error.message);
                        alert(error.message);
                    })
            },
            regist(){
                this.$router.push('/u_regist');
            },
            uindex(){
                this.$router.push('/u_login_index');
            },
            cakes(){
                this.$router.push('/u_movie');
            },
            desserts(){
                this.$router.push('/u_book');
            },
            puddings(){
                this.$router.push('/u_music');
            },
            pictures(){
                 this.$router.push('/u_pic');
            },
            inputFocus(){
                var replyInput = document.getElementById('replyInput');
                replyInput.style.padding= "8px 8px"
                replyInput.style.border ="2px solid blue"
                replyInput.focus()
            },
            showReplyBtn(){
                this.btnShow = true
            },
            shoppingCart(){
                this.$router.push('/u_cart');
            },
            hideReplyBtn(){
                this.btnShow = false
                replyInput.style.padding= "10px"
                replyInput.style.border ="none"
            },
            showReplyInput(i,name,id){
                this.comments[this.index].inputShow = false
                this.index =i
                this.comments[i].inputShow = true
                this.to = name
                this.toId = id
            },
            _inputShow(i){
                return this.comments[i].inputShow
            },
            sendComment(){
                if(!this.replyComment){
                    this.$message({
                        showClose: true,
                        type:'warning',
                        message:'评论不能为空'
                    })
                }else{
                    let a ={}
                    let input =  document.getElementById('replyInput')
                    let timeNow = new Date().getTime();
                    let time= this.dateStr(timeNow);
                    a.name= this.myName
                    a.comment =this.replyComment
                    a.headImg = this.myHeader
                    a.time = time
                    a.commentNum = 0
                    a.like = 0
                    this.comments.push(a)
                    this.replyComment = ''
                    input.innerHTML = '';

                }
            },
            sendCommentReply(i,j){
                if(!this.replyComment){
                    this.$message({
                        showClose: true,
                        type:'warning',
                        message:'评论不能为空'
                    })
                }else{
                    let a ={}
                    let timeNow = new Date().getTime();
                    let time= this.dateStr(timeNow);
                    a.from= this.myName
                    a.to = this.to
                    a.fromHeadImg = this.myHeader
                    a.comment =this.replyComment
                    a.time = time
                    a.commentNum = 0
                    a.like = 0
                    this.comments[i].reply.push(a)
                    this.replyComment = ''
                    document.getElementsByClassName("reply-comment-input")[i].innerHTML = ""
                }
            },
            onDivInput: function(e) {
                this.replyComment = e.target.innerHTML;
            },
            dateStr(date){
                //获取js 时间戳
                var time=new Date().getTime();
                //去掉 js 时间戳后三位，与php 时间戳保持一致
                time=parseInt((time-date)/1000);
                //存储转换值
                var s;
                if(time<60*10){//十分钟内
                    return '刚刚';
                }else if((time<60*60)&&(time>=60*10)){
                    //超过十分钟少于1小时
                    s = Math.floor(time/60);
                    return  s+"分钟前";
                }else if((time<60*60*24)&&(time>=60*60)){
                    //超过1小时少于24小时
                    s = Math.floor(time/60/60);
                    return  s+"小时前";
                }else if((time<60*60*24*30)&&(time>=60*60*24)){
                    //超过1天少于30天内
                    s = Math.floor(time/60/60/24);
                    return s+"天前";
                }else{
                    //超过30天ddd
                    var date= new Date(parseInt(date));
                    return date.getFullYear()+"/"+(date.getMonth()+1)+"/"+date.getDate();
                }
            }
        }
    }

</script>

<style lang="stylus" scoped>
    .my-reply
        padding 10px
        background-color #fafbfc
        .header-img
            display inline-block
            vertical-align top
        .reply-info
            display inline-block
            margin-left 5px
            width 90%
            @media screen and (max-width:1200px) {
                width 80%
            }
            .reply-input
                min-height 20px
                line-height 22px
                padding 10px 10px
                color #ccc
                background-color #fff
                border-radius 5px
                &:empty:before
                    content attr(placeholder)
                &:focus:before
                    content none
                &:focus
                    padding 8px 8px
                    border 2px solid blue
                    box-shadow none
                    outline none
        .reply-btn-box
            height 25px
            margin 10px 0
            .reply-btn
                position relative
                float right
                margin-right 15px
    .my-comment-reply
        margin-left 50px
        .reply-input
            width flex
    .author-title:not(:last-child)
        border-bottom: 1px solid rgba(178,186,194,.3)
    .author-title
        padding 10px
        .header-img
            display inline-block
            vertical-align top
        .author-info
            display inline-block
            margin-left 5px
            width 60%
            height 40px
            line-height 20px
            >span
                display block
                cursor pointer
                overflow hidden
                white-space nowrap
                text-overflow ellipsis
            .author-name
                color #000
                font-size 18px
                font-weight bold
            .author-time
                font-size 14px
        .icon-btn
            width 30%
            padding 0 !important
            float right
            @media screen and (max-width : 1200px){
                width 20%
                padding 7px
            }
            >span
                cursor pointer
            .iconfont
                margin 0 5px
        .talk-box
            margin 0 50px
            >p
                margin 0
            .reply
                font-size 16px
                color #000
        .reply-box
            margin 10px 0 0 50px
            background-color #efefef
    .imgbox{
        text-align center;
    }
</style>


